import { Avatar, Menu, Space } from "antd";
import './style.css';
import { useNavigate } from "react-router-dom";
import { UserOutlined } from '@ant-design/icons';

const items = [
  {
    key: "/mainpage", 
    label: <span className="custom-menu-item">主页</span>, 
  },
  { 
    key: "/word", 
    label: <span className="custom-menu-item">单词背诵</span>, 
  },
  { 
    key: "/speech", 
    label: <span className="custom-menu-item">语音练习</span>, 
  },
  { 
    key: "/reading", 
    label: <span className="custom-menu-item">阅读翻译</span>, 
  },
  { 
    key: "/progress", 
    label: <span className="custom-menu-item">个人进度</span>, 
  },
  { 
    key: "/user", 
    label: (
      <Space size={16}>
        <Avatar
          style={{
            backgroundColor: '#87d068',
          }}
          icon={<UserOutlined />}
        />
      </Space>
    ),
  },
];

export default function MyMenu() {
  const navigate = useNavigate(); //2. 获取触发路由跳转的方法
  //菜单事件
  const handleMenu = ({ key }) => {
    console.log(key);
    navigate(key); //3. 触发路由跳转
  };
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      {/* 显示软件名称
      <div className="app-name">LinguaLeap</div> */}
      <Menu
        theme="dark"
        defaultSelectedKeys={["1"]}
        mode="horizontal"
        items={items}
        onClick={handleMenu}
        style={{ 
          height: '50px', // 设置固定高度
          width: '1800px',
          justifyContent: 'center' }}
      />
    </div>

  );
}